<template>
    <div class="page" style="width:99.4%;height: 99%;margin:0 auto;overflow:visible;">
        <div class="headerTop">
            报表名称:
            <el-input type="text" v-model="keyword" class="inpu" placeholder="请输入关键字" style="width: 5rem !important; ">
            </el-input>
            &nbsp;&nbsp;&nbsp;
            项目名称:
            <el-select v-model="product_id" placeholder="请选择项目" class="inpu" style="width: 5rem !important;">
                <el-option v-for="item in allProject" :key='item.value' :value="item.value" :label="item.label">
                </el-option>
            </el-select>
            <!-- &nbsp;&nbsp;&nbsp;
            报表类型:
            <el-select v-model="s_type" placeholder="请选择报表类型" class="inpu" style="width: 5rem !important;">
                <el-option v-for="item in sType" :key='item.value' :value="item.value" :label="item.label">
                </el-option>
            </el-select> -->
            <el-button type="primary" size="small" @click="searchReport()">查询</el-button>
            <el-button type="primary" size="small" @click="showAllReport" v-if="allReport">刷新全部</el-button>
        </div>

        <div class="header_bottom">
            <el-button type="success" size="small" @click="addReport">添加报表</el-button>
        </div>
        <div class="container_table" id="table">
            <el-table :data="tabledata" size="mini" border :header-cell-style="$tableHeaderStyle"
                :cell-style="$tableCellStyle">
                <el-table-column label="序号" type="index" align="center" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{ scope.$index + (queryParams.pageNo - 1) * queryParams.pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="product.product_name" label="所属项目" align="center" min-width="150">
                </el-table-column>
                <el-table-column prop="title" label="报表名称" align="center" min-width="150">
                </el-table-column>
                <el-table-column prop="algorithm_text" label="统计算法" align="center" min-width="80">
                </el-table-column>
                <!-- <el-table-column prop="type_text" label="报表类型" align="center" min-width="150">
                </el-table-column> -->
                <el-table-column prop="points.length" label="数据点数" align="center" min-width="40">
                </el-table-column>
                <el-table-column prop="add_time" label="添加日期" align="center" min-width="60">
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editReport(scope.row)">编辑</el-button>
                        <!-- <el-button type="success" size="mini" @click="copyReport(scope.row)">复制</el-button> -->
                        <el-button @click="sureDelete(scope.row)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">

                <el-pagination style="display:inline-block;vertical-align: middle;margin-top: 0.2rem;"
                    @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
                    :page-size="queryParams.pageSize" :page-sizes="[10, 15, 20]"
                    layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
                </el-pagination>
            </div>
        </div>
        <!-- 复制报表 -->
        <el-dialog :visible.sync="copyReportVisible" width="24%" append-to-body :show-close="close">
            <div class="toptit">
                <span>复制报表 ({{ copyReportName }})</span>
                <span style="float:right;cursor: pointer;" @click="copyReportVisible = false">关闭</span>
            </div>
            <el-form :model="copyReportFrom" ref="copyReportFrom">

                <!-- <el-form-item label="所属项目:" :label-width="formLabelWidth">
                    <el-select v-model="copyReportFrom.id" placeholder="选择所属项目" class="inpu">
                        <el-option v-for="item in project_list" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="报表名称:" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="copyReportFrom.title" auto-complete="off" class="inpu" placeholder="请输入报表名"
                        style="width: 5rem !important;" spellcheck="false"></el-input>
                </el-form-item>
                <el-form-item label="统计算法:" :label-width="formLabelWidth">
                    <el-select v-model="copyReportFrom.algorithm" placeholder="选择周期" class="inpu"
                        style="width: 5rem !important;">
                        <el-option v-for="item in rAlgorithm" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报表类型:" :label-width="formLabelWidth">
                    <el-select v-model="copyReportFrom.type" placeholder="选择类型" class="inpu"
                        style="width: 5rem !important;">
                        <el-option v-for="item in rType" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="text-align: right;">
                <el-button type="primary" @click="sureCopyReport" size="mini">确 定</el-button>
                <el-button @click="copyReportVisible = false" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getAllProject } from "../request.js";
export default {
    name: 'report',
    data() {
        return {
            close: false,
            keyword: '',
            project_list: [],
            allProject: [],
            product_id: '0',
            allReport: false,
            copyReportVisible: false,
            formLabelWidth: '100px',
            copyReportName: '',
            copyReportFrom: {
                id: '',
                title: '',
                algorithm: '',
                type: '',
            },
            rAlgorithm: [
                { value: 'min', label: '最小值' },
                { value: 'max', label: '最大值' },
                { value: 'increment', label: '增长值' },
            ],
            rType: [
                { value: '1', label: '日报' },
                // { value: '2', label: '周报' },
                { value: '3', label: '月报' },
                { value: '4', label: '年报' },
            ],
            sType: [
                { value: '0', label: '全部' },
                { value: '1', label: '日报' },
                // { value: '2', label: '周报' },
                { value: '3', label: '月报' },
                { value: '4', label: '年报' },
            ],
            s_type: '0',
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            tabledata: [],
        }
    },
    created() {
        // 所有项目的下拉
        this.getAllProject()
        //查所有报表
        this.searchAllReport();




    },
    methods: {
        // 拿所有的项目下拉
        getAllProject() {
            getAllProject().then(data => {
                // console.log('data234534543', data);

                this.project_list = data;
                this.allProject = [{ value: '0', label: '全部' }, ...data];
            })
        },
        // 查所有的报表
        searchAllReport() {
            this.$http({
                method: 'post',
                url: 'api/statement/list',
                data: {
                    limit: this.queryParams.pageSize,
                    page: this.queryParams.pageNo,
                    keyword: this.keyword,
                    product_id: this.product_id,
                    // type: this.s_type
                }

            }).then(res => {
                // console.log('所有报表列表', res);
                if (res && res.data.result == "success") {
                    this.tabledata = res.data.data.list
                    this.queryParams.total = res.data.data.total
                }
            }).catch(error => {
                console.log(error);
            });
        },
        // 点击复制报表
        copyReport(row) {
            this.copyReportVisible = true
            this.copyReportName = row.title
            this.copyReportFrom.id = row.id
            this.copyReportFrom.algorithm = row.algorithm
            this.copyReportFrom.type = row.type.toString()
            this.copyReportFrom.title = ''
        },
        // 确认复制报表
        sureCopyReport() {
            this.$http({
                method: "post",
                url: "api/statement/copy",
                data: {
                    id: this.copyReportFrom.id,
                    title: this.copyReportFrom.title,
                    algorithm: this.copyReportFrom.algorithm,
                    type: this.copyReportFrom.type
                },
            }).then((res) => {
                if (res && res.data.result == "success") {
                    this.copyReportVisible = false
                    this.searchAllReport()

                }
            }).catch((error) => {
                console.log(error);
            });
        },



        searchReport() {
            this.allReport = true
            // console.log('查询报表')
            this.queryParams.pageNo = 1,


                this.searchAllReport()
        },
        showAllReport() {
            this.allReport = false
            this.keyword = ''
            this.product_id = '0'
            this.s_type = '0'
            this.searchAllReport()
            // console.log('刷新全部报表')
        },


        addReport() {

            this.$router.push({
                name: 'addReport',
                path: '/addReport',
                component: 'addReport'
            });

        },

        editReport(row) {

            localStorage.setItem('reportId', row.id)
            this.$router.push({
                name: 'editReport',
                path: '/editReport',
                component: 'editReport',

            });
        },
        sureDelete(row) {
            this.$confirm('删除报表后将无法恢复,,是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var that = this;
                this.$http({
                    method: 'post',
                    url: 'api/statement/delete',
                    data: {
                        'id': row.id

                    }
                }).then(res => {
                    if (res && res.data.result == "success") {
                        this.searchAllReport();
                        setTimeout(function () {
                            if (
                                that.tableData.length == 0 &&
                                that.queryParams.pageNo > 1
                            ) {
                                that.queryParams.pageNo--;
                                that.searchAllReport();
                            }
                        }, 1000);
                    }
                }).catch(error => {
                    console.log(error);
                });
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },




        // 分页
        current_change(currentPage) {
            this.queryParams.pageNo = currentPage;
            this.searchAllReport();
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.searchAllReport();
        },

    }
}
</script>

<style scoped></style>
